<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>希望学校</title>
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/common.css">
    <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=dA3UjEDKVZC4G6B9Rjm1rfHDTLIKTAFs"></script>
</head>
<!--body  就是显示区域 可视区域 -->
<body class="justify-content-center">
<div>
    <!--    头部-->
    <div>
        <!--        公司信息-->
        <div class="company justify-content-center">
            <div class="justify-content-between align-items-center">
                <div>欢迎来到希望学校网站</div>
                <div class="justify-content-start ">
                    <div class="justify-content-start align-items-center">
                        <div><img src="../img/a0gm.jpg"/></div>
                        <div>9256-208-0222</div>
                    </div>
                    <div class="justify-content-start align-items-center">
                        <div><img src="../img/xwri.png"/></div>
                        <div>xiwang@163.com</div>
                    </div>
                </div>
            </div>
        </div>
        <!--        导航信息-->
        <div class="nav justify-content-center">
            <div class="align-items-center">
                <div class="justify-content-start align-items-center">
                    <div><img src="../img/nrq0.jpg"/></div>
                    <div>
                        <div class="chinese-name">希望学校</div>
                        <div class="english-name">HOPE SCHOOL</div>
                    </div>
                </div>
                <div class="justify-content-start nav-content">
                    <div>
                        <div class="yuan"></div>
                        <div>首页</div>
                    </div>
                    <div>
                        <div class="yuan"></div>
                        <div>关于我们</div>
                    </div>
                    <div>
                        <div class="yuan"></div>
                        <div>新闻中心</div>
                    </div>
                    <div>
                        <div class="yuan"></div>
                        <div>
                            <div>课程中心</div>
                            <div class="xiala">
                                <div>小学生辅导</div>
                                <div>小学生辅导</div>
                                <div>小学生辅导</div>
                                <div>小学生辅导</div>
                            </div>

                        </div>

                    </div>
                    <div>
                        <div class="yuan"></div>
                        <div>在线预约</div>
                    </div>
                    <div>
                        <div class="yuan"></div>
                        <div>联系我们</div>
                    </div>

                </div>
            </div>
        </div>
        <!--        广告信息-->
        <div class="ad justify-content-center">
            <div class="align-items-center justify-content-end">
                <div>
                    <div class="qinfen justify-content-start">
                        <div> 勤奋</div>
                        <div>·</div>
                        <div> 求实</div>
                        <div>·</div>
                        <div>进取</div>
                        <div>·</div>
                        <div>创造</div>
                    </div>
                    <div class="jiaoyu">教育的伟大目标不只是装饰而是训练心灵,使具备有用的能力而非填塞前人经验的累积
                    </div>
                    <div class="justify-content-start button">
                        <div>联系我们</div>
                        <div>给我们留言</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--    中间-->
    <div class="middle">
        <!--        课程辅导优势关于我们-->
        <div class="justify-content-center">
            <div class="fudao-youshi-us justify-content-between">
                <div class="fudao flex-wrap-wrap">
                    <div>
                        <div>小学生辅导</div>
                    </div>
                    <div>
                        <div>小学生辅导</div>
                    </div>
                    <div>
                        <div>小学生辅导</div>
                    </div>
                    <div>
                        <div>小学生辅导</div>
                    </div>
                    <div>
                        <div>小学生辅导</div>
                    </div>
                    <div class="justify-content-center align-items-center">
                        <div>+</div>
                    </div>
                </div>
                <div class="youshi">
                    <div class="justify-content-between align-items-center">
                        <div class="justify-content-start align-items-center">
                            <div>
                                <!--                                矩形-->
                                <div class="rect">HOT</div>
                                <!--                                三角形-->
                                <div class="sanjiao"></div>
                            </div>
                            <div>我们的优势</div>
                        </div>
                        <div class="read-more">READ MORE</div>
                    </div>
                    <div class="flex-wrap-wrap justify-content-around">
                        <div>
                            <div class="justify-content-center"><img src="../img/2tc7.jpg"/></div>
                            <div class="youshi-name">办学声誉</div>
                            <div class="many-over-three">远扬学校教育理念先进，教学管理严谨,师资力量雄厚，教育质量领先,
                                办学特色鲜明办学声誉远扬
                            </div>
                        </div>
                        <div>
                            <div class="justify-content-center"><img src="../img/2tc7.jpg"/></div>
                            <div class="youshi-name">办学声誉</div>
                            <div class="many-over-three">远扬学校教育理念先进，教学管理严谨,师资力量雄厚，教育质量领先,
                                办学特色鲜明办学声誉远扬
                            </div>
                        </div>
                        <div>
                            <div class="justify-content-center"><img src="../img/2tc7.jpg"/></div>
                            <div class="youshi-name">办学声誉</div>
                            <div class="many-over-three">
                                办学特色鲜明办学声誉远扬
                            </div>
                        </div>
                        <div>
                            <div class="justify-content-center"><img src="../img/2tc7.jpg"/></div>
                            <div class="youshi-name">办学声誉</div>
                            <div class="many-over-three">远扬学校教育理念先进，教学管理严谨,师资力量雄厚，教育质量领先,
                                办学特色鲜明办学声誉远扬
                            </div>
                        </div>
                    </div>
                </div>
                <div class="us">
                    <div class="align-items-center">
                        <div>
                            <div>关于我们</div>
                            <div>ABOUT US</div>
                        </div>
                    </div>
                    <div>
                        <img src="../img/cvma.jpg" align="left"/>
                        四川省成都市希望中学坐溶在天府之国四川的省会成都市的行政中心区，是四川省一级重点中学、四川社文明学校、全国绿色学校。新校园位于美丽的太行山青麓，占地面积252亩，校
                        建筑面积90000平方米,投资2.1亿元，拥有省内一流、国内领先的现代化教育教学基础设施。内.近年来，学校文化建设内涵不断丰富，教育质量稳步提高,高考成绩连年攀升，年年突破，跃居成都市前列,一大批优秀学生跨进北大、清华等全国名牌大学的校门。
                    </div>
                    <div class="justify-content-center align-items-center">
                        <div class="read-more">READ MORE</div>
                    </div>
                </div>
            </div>
        </div>
        <!--        理念，新闻-->
        <div class="justify-content-center">
            <div class="justify-content-between">
                <!--                理念-->
                <div class="linian">
                    <div class="justify-content-between mid-nav align-items-center">
                        <div>
                            <div class="chinese-name">公司理念</div>
                            <div class="english-name">ENTERPRISE IDEA
                            </div>
                        </div>
                        <div class="read-more">READ MORE</div>
                    </div>
                    <div class="justify-content-between">
                        <div>
                            <div class="justify-content-center"><img src="../img/v9si.jpg"/></div>
                            <div class="name">关于我们</div>
                            <div>
                                某某省某某某某市第一中学坐落在xx中部现代化港口城市-
                                —XXXX市
                                的行政中心区，是xx省—级重点中学、xx省文明学校、全国绿色学
                                校。
                            </div>
                        </div>
                        <div>
                            <div class="justify-content-center"><img src="../img/v9si.jpg"/></div>
                            <div class="name">关于我们</div>
                            <div>
                                某某省某某某某市第一中学坐落在xx中部现代化港口城市-
                                —XXXX市
                                的行政中心区，是xx省—级重点中学、xx省文明学校、全国绿色学的行政中心区，是xx省—级重点中学、xx省文明学校、全国绿色学的行政中心区，是xx省—级重点中学、xx省文明学校、全国绿色学的行政中心区，是xx省—级重点中学、xx省文明学校、全国绿色学的行政中心区，是xx省—级重点中学、xx省文明学校、全国绿色学的行政中心区，是xx省—级重点中学、xx省文明学校、全国绿色学的行政中心区，是xx省—级重点中学、xx省文明学校、全国绿色学的行政中心区，是xx省—级重点中学、xx省文明学校、全国绿色学
                                校。
                            </div>
                        </div>
                    </div>
                </div>
                <!--                新闻-->

                <div class="news">
                    <div class="justify-content-between mid-nav align-items-center">
                        <div>
                            <div class="chinese-name">公司理念</div>
                            <div class="english-name">ENTERPRISE IDEA
                            </div>
                        </div>
                        <div class="read-more">READ MORE</div>
                    </div>
                    <!--                    新闻内容-->
                    <div class="justify-content-between news-content">
                        <div>
                            <div class="justify-content-start news-type">
                                <div>
                                    <div class="type">通知公告</div>
                                    <div class="justify-content-center">
                                        <div class="sanjiao"></div>
                                    </div>
                                </div>
                                <div>
                                    <div class="type">学校新闻</div>
                                    <div class="justify-content-center">
                                        <div class="sanjiao"></div>
                                    </div>
                                </div>
                                <div>
                                    <div class="type">媒体报导</div>
                                    <div class="justify-content-center">
                                        <div class="sanjiao"></div>
                                    </div>
                                </div>
                            </div>
                            <div></div>
                        </div>
<!--                        轮播-->
                        <div>
                            <div class="focus">
                            </div>
                        </div>
                    </div>
                </div>
                <!--                联系我们-->
                <div class="callus"></div>
            </div>
        </div>
        <!--        地图-->
        <div class="justify-content-center">
            <div class="map justify-content-between">
                <div>
                    <div></div>
                    <div>
                        <div></div>
                    </div>
                </div>
                <!--                地图显示-->
                <div>
                    <div id="container"></div>
                </div>
            </div>
        </div>
        <!--        轮播-->
        <div class="justify-content-center">
            <div class="lunbo">
                <div class="justify-content-start">
                    <div>
                        <div><img src="../img/b_dxxd.png"/></div>
                        <div>一对一辅导</div>
                    </div>
                    <div>
                        <div><img src="../img/b_dxxd.png"/></div>
                        <div>一对一辅导</div>
                    </div>
                    <div>
                        <div><img src="../img/b_dxxd.png"/></div>
                        <div>一对一辅导</div>
                    </div>
                    <div>
                        <div><img src="../img/b_dxxd.png"/></div>
                        <div>一对一辅导</div>
                    </div>
                    <div>
                        <div><img src="../img/b_dxxd.png"/></div>
                        <div>一对一辅导</div>
                    </div>
                    <div>
                        <div><img src="../img/b_dxxd.png"/></div>
                        <div>一对一辅导</div>
                    </div>
                    <div>
                        <div><img src="../img/b_dxxd.png"/></div>
                        <div>一对一辅导</div>
                    </div>
                    <div>
                        <div><img src="../img/b_dxxd.png"/></div>
                        <div>一对一辅导</div>
                    </div>
                </div>
            </div>
        </div>
<!--        第三种轮播-->
        <div>
            <!--                        固定轮播图能够看到的大小，多余的隐藏-->
            <div class="lunbo2">
                <!--                            设定几张图片的总长度-->
                <div class="box">
                    <img src="../img/8n4k.png" alt="">
                    <img src="../img/a_kr3u.png" alt="">
                    <img src="../img/a_rh30.png" alt="">
                    <img src="../img/b_dxxd.png" alt="">
                </div>
            </div>
        </div>
    </div>
    <!--    底部-->
    <div>底部</div>
</div>
</body>
</html>
<script>
    var map = new BMapGL.Map('container'); // 创建Map实例
    // 初始化地图,设置中心点坐标和地图级别
    var point = new BMapGL.Point(104.066212, 30.579299);
    map.centerAndZoom(point, 18);
    map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放

    var marker = new BMapGL.Marker(point);  // 创建标注
    map.addOverlay(marker);              // 将标注添加到地图中
    var opts = {
        width: 200,     // 信息窗口宽度
        height: 100,     // 信息窗口高度
        title: "万息集训", // 信息窗口标题
        message: "岗前集训"
    }
    var infoWindow = new BMapGL.InfoWindow("地址：成都市孵化园e座4楼", opts);  // 创建信息窗口对象
    marker.addEventListener("click", function () {
        map.openInfoWindow(infoWindow, point); //开启信息窗口
    });
</script>